import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined } from '@ant-design/icons'
import { Avatar, Dropdown } from 'antd'
import React, { useEffect, useState } from 'react'
import { useStore } from '../../store'
import './Head.scss'

function Com(props) {
  const [state, setState] = useState(false)
  const { collapseStore } = useStore()

  useEffect(() => {
    console.log('函数组件来咯')
  }, [])
  let items = [
    {
      key: 1,
      label: '用户设置',
      type: 'group',
      children: [
        {
          key: '1-1',
          label: '个人设置'
        },
        {
          key: '1-2',
          label: '系统设置'
        }
      ]
    },
    {
      key: 2,
      label: '退出登录'
    }
  ]
  return (
    <header
      style={{
        padding: 0,
        backgroundColor: '#f5f5f5',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        height: 50
      }}>
      {React.createElement(collapseStore.collapse ? MenuUnfoldOutlined : MenuFoldOutlined, {
        className: 'trigger',
        onClick: () => {
          collapseStore.change()
        }
      })}
      <Dropdown menu={{ items }}>
        <Avatar icon={<UserOutlined />} />
      </Dropdown>
    </header>
  )
}

export default Com
